$(function () {
  //需求1：初始化文章分类 - 封装函数
  let layer = layui.layer
  let form = layui.form
  initArtCateList()
  function initArtCateList() {
    axios({
      url: '/my/article/cates'
    }).then(res => {
      //成功回调
      // console.log(res)
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      // 成功：渲染
      let arr = ['<option value="">请选择文章所属分类</option>']
      res.data.data.forEach(ele => {
        arr.push(`<option value="${ele.Id}">${ele.name}</option>`)

      })
      // 循环结束赋值
      let str = arr.join('')
      $('[name=cate_id]').empty().html(str)
      // form.render();可以渲染layui中的 select/checkbox/radio
      form.render()
    });

  }

  //需求2： 初始化富文本编辑器
  initEditor()

  // 需求3：文章封面图片
  // 3.1. 初始化图片裁剪器
  let $image = $('#image')
  // 3.2. 裁剪选项
  let options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  // 3.3. 初始化裁剪区域
  $image.cropper(options)

  // 需求4：定义状态
  let state = '';
  $('#btn1').on('click', function () {
    state = '已发布'
  });
  $('#btn2').on('click', function () {
    state = '草稿'
  })
  // 需求：文章发布
  $('#formPub').on('submit', function (e) {
    // 阻止表单默认提交，然后组装参数，发送ajax
    e.preventDefault()
    // 生成FormData对象
    let fd = new FormData(this)
    // 添加状态字段
    fd.append('state', state)
    console.log(...fd)

  })

  // 需求5:选择图片，渲染图片
  $('#chooseImageBtn').on('click', function () {
    $('#chooseImageInp').click()
  })
  $('#chooseImageInp').on('change', function (e) {
    // 1.拿到用户选择的文件
    let file = e.target.files[0]
    // 非空校验
    if (file === undefined) {
      return layer.msg('文章封面不能为空!')
    }
    // 2.根据选择的文件，创建一个对应的URL 地址
    let newImgURL = URL.createObjectURL(file)
    $image
        .cropper('destroy')
        .attr('src', newImgURL)
        .cropper(options)
  })

  // 需求6：文章发布
  $('#formPub').on('submit', function (e) {
    // 阻止表单默认提交，然后组装参数，发送ajax
    e.preventDefault()
    // 生成FormData对象
    let fd = new FormData(this)
    // 添加状态字段
    fd.append('state', state)
    $image
        .cropper('getCroppedCanvas', {
        width: 400,
        height: 280
      })
      .toBlob(function (blob) {
        fd.append('cover_img', blob)
        console.log(...fd);
        // 发送ajax（两种方法：1.jq中的ajax; 2.axios）
        axios({
          url: '/my/article/add',
          method: 'post',
          data: fd
        }).then(res => {
          //成功回调
          if (res.data.status !== 0) {
            return layer.msg(res.data.message)
          }
          // 成功提示
          layer.msg('恭喜您，添加文章成功!')
          setTimeout(function () {
            window.parent.document.querySelector('#art_list').click()
          }, 2000)
        });
      })
  })
})